<template>
  <div>
    <h1 class="tittle">{{ form.tittle }}</h1>
    <van-form
      @submit="onSubmit"
      input-align="center"
      error-message-align="center"
    >
      <!-- 业务办理日期 -->
      <van-field
        readonly
        clickable
        :value="
          form.date != undefined ? new Date(form.date).toLocaleDateString() : ''
        "
        label="业务办理日期"
        placeholder="系统自动生成"
      />
      <!-- 业务状态登记 -->
      <van-field
        readonly
        clickable
        :value="form.register"
        label="业务状态登记"
        placeholder="选择"
        @click="showRegister = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showRegister" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.register"
          @confirm="onConfirmregister"
          @cancel="showRegister = false"
        />
      </van-popup>
      <!-- 办理套餐 -->
      <van-field
        readonly
        clickable
        :value="form.success"
        label="办理套餐"
        placeholder="选择"
        @click="showSuccess = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showSuccess" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.success"
          @confirm="onConfirmSuccess"
          @cancel="showSuccess = false"
        />
      </van-popup>
      <!-- 礼品选择1 -->
      <van-field
        readonly
        clickable
        :value="gift"
        label="赠送礼品1"
        placeholder="选择"
        @click="showgift = true"
        v-if="form.register === '成功'"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showgift" position="bottom">
        <van-picker
          show-toolbar
          :columns="giftlist"
          value-key="_id"
          @confirm="onConfirmgift"
          @cancel="showgift = false"
        />
      </van-popup>
      <!-- 礼品选择2 -->
      <van-field
        readonly
        clickable
        :value="gift2"
        label="赠送礼品2"
        placeholder="选择"
        @click="showgift2 = true"
        v-if="form.register === '成功'"
      />
      <van-popup v-model="showgift2" position="bottom">
        <van-picker
          show-toolbar
          :columns="giftlist"
          value-key="_id"
          @confirm="onConfirmgift2"
          @cancel="showgift2 = false"
        />
      </van-popup>
      <!-- 图片区 -->
      <van-row>
        <!-- 客户手机IMEI登记 -->
        <van-col span="8">
          <span>客户手机IMEI登记</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path1"
                v-model="fileList1"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
        <!-- 和商汇登记IMEI -->
        <van-col span="8">
          <span>和商汇登记IMEI</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path2"
                v-model="fileList2"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
        <!-- 上门失败合照 -->
        <van-col span="8">
          <span>上门失败合照</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path3"
                v-model="fileList3"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
      </van-row>

      <van-field v-model="form.leave" label="备注" placeholder="备注" />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Notify, Toast } from 'vant'
export default {
  data() {
    return {
      showRegister: false,
      showSuccess: false,
      // 表单数据
      form: {},
      baseform: {
        register: [
          {
            text: '电话',
            children: [
              { text: '电话' },
              { text: '电话无人接听' },
              { text: '客户不在东莞' },
            ],
          },
          {
            text: '成功',
            children: [{ text: '成功' }],
          },
          {
            text: '客户不愿意或无法授权支付宝',
            children: [
              {
                text: '客户无支付宝',
              },
              {
                text: '客户支付宝额度不够',
              },
              {
                text: '不愿意承诺使用2年',
              },
              {
                text: '不愿意预存960',
              },
              {
                text: '不愿意预存300',
              },
            ],
          },
          {
            text: '客户不愿意升套餐',
            children: [
              {
                text: '不愿意使用189套餐',
              },
              {
                text: '不愿意使用139套餐',
              },
              {
                text: '不愿意使用89套餐',
              },
              {
                text: '不愿意使用109套餐',
              },
            ],
          },
          {
            text: '不接受礼品',
            children: [
              {
                text: '不接受礼品',
              },
            ],
          },
          {
            text: '客户反悔或客户其他原因',
            children: [
              {
                text: '客户反悔',
              },
              {
                text: '客户没空',
              },
              {
                text: '现在或以后不使用当前号码',
              },
              {
                text: '客户不知道情,拒绝办理',
              },
              {
                text: '号码是公司号码',
              },
              {
                text: '不愿意见面',
              },
              {
                text: '客户不相信活动',
              },
              {
                text: '其他',
              },
            ],
          },
          {
            text: '套餐互斥',
            children: [
              {
                text: '套餐互斥',
              },
            ],
          },
        ],
        success: [
          '59套餐',
          '89套餐',
          '109套餐',
          '119套餐',
          '139套餐',
          '189套餐',
          '239套餐',
          '289套餐',
        ],
      },

      // 相片
      fileList1: [],
      fileList2: [],
      fileList3: [],
      // 礼品
      giftlist: [],
      showgift: false,
      showgift2: false,
      gift: this.$route.params.gift,
      gift2: this.$route.params.gift2,
    }
  },
  created() {
    if (this.$route.params.projectId !== undefined) {
      if (this.$route.params.form !== undefined) {
        this.form = this.$route.params.form
        if (this.$route.params.form.image1 !== undefined) {
          this.fileList1.push({ url: this.$route.params.form.image1 })
        }
        if (this.$route.params.form.image2 !== undefined) {
          this.fileList2.push({ url: this.$route.params.form.image2 })
        }
        if (this.$route.params.form.image3 !== undefined) {
          this.fileList3.push({ url: this.$route.params.form.image3 })
        }
      }
    } else {
      this.$router.go(-1)
      return Notify({ type: 'warning', message: '上一页已失效!' })
    }
    this.getgift()
  },
  methods: {
    // 提交表单
    async onSubmit(values) {
      const { data: res } = await this.$http.put('hx/hfq/upform', {
        form: this.form,
        _id: this.$route.params.projectId,
      })
      if (res.meta.status !== 200) {
        Notify({ type: 'danger', message: res.meta.msg })
        return
      }
      Notify({ type: 'success', message: res.meta.msg })
      this.$router.push('/mhfq')
    },
    // 业务状态登记
    onConfirmregister(values) {
      this.form.register = values[1]
      this.showRegister = false
    },
    //办理套餐
    onConfirmSuccess(values) {
      this.form.success = values
      this.showSuccess = false
    },
    // 图片上传
    async afterRead(file, name) {
      let filename = {
        path: name.name,
        projectId: this.$route.params.projectId,
      }
      let formdata = new FormData()
      formdata.append('file', file.file)
      formdata.append('path', JSON.stringify(filename))
      file.status = 'uploading'
      file.message = '上传中...'
      const { data: res } = await this.$http.post('hx/hfq/upimage', formdata)
      if (res.meta.status !== 200) {
        file.status = 'failed'
        file.message = '上传失败'
        Notify({ type: 'danger', message: res.meta.msg })
        return
      }
      file.status = 'done'
      file.message = '上传成功'
      Notify({ type: 'success', message: res.meta.msg })
    },
    // 礼品1选择上传
    async onConfirmgift(row) {
      if (row === undefined) {
        return
      }
      const { data: res } = await this.$http.post('hx/usegift', {
        giftName: row,
        num: 1,
        projectId: this.$route.params.projectId,
        phoneNum: this.$route.params.phoneNum,
      })
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Toast(res.meta.msg)
      this.gift = row._id
    },
    //礼品2选择上传
    async onConfirmgift2(row) {
      if (row === undefined) {
        return
      }
      const { data: res } = await this.$http.post('hx/usegift2', {
        giftName: row,
        num: 1,
        projectId: this.$route.params.projectId,
        phoneNum: this.$route.params.phoneNum,
      })
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Toast(res.meta.msg)
      this.gift2 = row._id
    },
    // 获取仓库礼品
    async getgift() {
      const { data: res } = await this.$http.post('hx/getgiftlist')
      this.giftlist = res.data
    },
  },
}
</script>

<style lang="less" scope>
.van-col {
  span {
    margin: 0 10px;
  }
}

.tittle {
  text-align: center;
}
</style>